<%@ page import="com.h.heal.entity.User" %>
<%@ page contentType="text/html; charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!doctype html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.88.1">
    <title>Heal文章专栏</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/4.6/examples/album/">


    <!-- Bootstrap core CSS -->
    <link href="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/bootstrap/5.1.3/css/bootstrap.min.css"
          rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">

    <style>
        header {
            position: absolute;
            z-index: 2;
            width: 100%;
            background: rgba(255,255,255,0);
            border: none;
        }


        /*轮播样式*/
        .swiper {
            width: 100%;
            height: 300px;
        }

        .bg-sw {
            width: 100%;

        }
        /*轮播样式*/

        .container {
            background: rgba(255, 255, 255, 0);
        }

        main {
            background: linear-gradient(to top right, #a1ffce 0%, #faffd1 100%);
            background: no-repeat;
            background: fixed
        }


        .col-sm-4.offset-md-1.py-4 {
            width: 60%;
        }

        .col-sm-8.col-md-7.py-4 {
            width: 30%;
        }

        ul li{

            float: left;

            margin-right: 30px;

        }

        .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        a.logout_button {
            padding: 10px;
            text-decoration: none;
        }

        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
                font-size: 3.5rem;
            }
        }


        .sousuo {
            border-radius: 100px;
            height: 100%;
            width: 100%;
            border: none;
            text-align: center;
            font-size: 25px;
            color: rgba(240, 248, 255, 0.850);
            background-color: rgba(255, 255, 255, 0.500);
        }


        .sousuo_button {
            position: relative;
            left: 20px;
            width: 20%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0);
            border-color: aquamarine;
            border-radius: 100px;
            border-style: solid;
            color: azure;
        }

        .backtop_button {
            width: 100px;
            height: 40px;
            background-color: rgba(255, 255, 255, 0);
            border-color: rgb(0, 0, 0);
            border-radius: 100px;
            border-style: solid;
            color: rgb(0, 0, 0);
            text-align: center;
            font-size: 17px;
        }

        .logout_button {
            width: 100px;
            height: 40px;
            background-color: rgba(255, 255, 255, 0);
            border-radius: 100px;
            border: solid #ff6f00;
            color: orange;
            text-align: center;
            font-size: 17px;
        }

        h4#usermassage {
            color: orange;
            font-weight: 900;
        }

        .text_style {
            color: orange;
            font-size: 85px;
            font-weight: 900;
        }

        a.btn.btn-primary.my-2 {
            font-size: 40px;
            font-weight: 900;
        }

        a.btn.btn-secondary.my-2 {
            font-size: 40px;
            font-weight: 900;
        }

        .rad {
            border-radius: 10px;
        }

        .videostyle {
            border-radius: 10px;
            width: 100%;
            height: 100%;
        }
    </style>


    <!-- Custom styles for this template -->
    <link href="./css/album.css" rel="stylesheet">
</head>
<body>

<header>
    <div class="collapse bg" id="navbarHeader">
        <div class="container">
            <div class="row">
                <div class="col-sm-8 col-md-7 py-4">
                    <h4 id="usermassage" class="text-orange">您好！
                        尊贵的<%=((User) request.getSession().getAttribute("user_info")).getUser_name()%>
                    </h4>
                    <p class="text-muted">Uid<%=((User) request.getSession().getAttribute("user_info")).getUser_uid()%>
                    </p>
                    <a class="logout_button" href="/user/logout">退出登录</a>
                </div>
                <div class="col-sm-4 offset-md-1 py-4">
                    <ul class="list-unstyled">
                        <li><a href="/video/user/main" class="logout_button">视频投稿中心</a></li>
                        <li><a href="/topic/user/main" class="logout_button">文章投稿中心</a></li>
                        <li><a href="/comment/user/main" class="logout_button">评论管理中心</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="navbar navbar bg ">
        <div class="container d-flex justify-content-between">
            <p class="text_style" style="width: 90% ;text-align: center">HEAL</p>
            <button class="logout_button" type="button" data-toggle="collapse" data-target="#navbarHeader"
                    aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">更多
            </button>
        </div>
    </div>
</header>
<%--轮播--%>
<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img class="bg-sw"
                                       src="https://ts1.cn.mm.bing.net/th/id/R-C.87f1a74f8be95c11784d352d04677a4c?rik=dAnC3dHoUdIBPA&riu=http%3a%2f%2fpic154.huitu.com%2fpic%2f20201225%2f2020673_20201225152913581020_0.jpg&ehk=1fT4XMAon3BVswnw9cYQwsFsdhVEzD5KLPRbBnu79bo%3d&risl=&pid=ImgRaw&r=0">
        </div>
        <div class="swiper-slide"><img class="bg-sw"
                                       src="https://ts1.cn.mm.bing.net/th/id/R-C.3e8d6642e9d216793933a15ee7c0d1e5?rik=xliMeaBp6nC30Q&riu=http%3a%2f%2fpic148.huitu.com%2fpic%2f20200825%2f2414338_20200825125657112060_0.jpg&ehk=SwdH0NWF8qEezoXupFsM8r1LnFLs2tDZXv3fqCiig9A%3d&risl=&pid=ImgRaw&r=0">
        </div>
        <div class="swiper-slide"><img class="bg-sw"
                                       src="https://ts1.cn.mm.bing.net/th/id/R-C.c9a01d801df4a558d3654fdce2bcc164?rik=%2bBWRmpd7RJrTIA&riu=http%3a%2f%2fpic124.huitu.com%2fpic%2f20190629%2f2020673_20190629170045918020_0.jpg&ehk=379psr0%2bsKUVFj4JTY3PZ9YpiFgAzOzjGqZVMQ2qQ70%3d&risl=&pid=ImgRaw&r=0">
        </div>
    </div>
    <!-- 如果需要分页器 -->
    <!--    <div class="swiper-pagination"></div>-->

    <!-- 如果需要导航按钮 -->
<%--    <div class="swiper-button-prev"></div>--%>
<%--    <div class="swiper-button-next"></div>--%>

    <!-- 如果需要滚动条 -->
    <!--    <div class="swiper-scrollbar"></div>-->
</div>

<main role="main" onclick="claer()">
    <section class="jumbotron text-center">
        <div class="container">
            <%--            <img src="/style/image/fuckfuck.png">--%>

            <a href="/video/index" class="btn btn-secondary my-2">健康视频</a>
            &nbsp;
            <a href="/topic/index" class="btn btn-primary my-2">健康文章</a>
        </div>
    </section>

    <div class="album py-5 bg-light">
        <div class="container">
            <div class="row">

                <c:forEach var="item" items="${list}">

                    <div class="col-md-4 rad">

                            <div class="card mb-4 shadow-sm rad">

                                <div class="card-body">
                                    <h3 class="card-text"> <a href="/topic/user/browse/${item.topic_tid}">${item.topic_title}</a></h3>
                                    <p class="card-text" id="topic_tid" hidden>${item.topic_tid}</p>
                                    <p class="card-text">作者：${item.topic_uid}</p>
                                    <p class="card-text">发布时间：${item.topic_timestamp}</p>
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div class="btn-group">
                                            <button name="like_btn" type="button"
                                                    class="btn btn-sm btn-outline-secondary"
                                                    onclick="like(${item.topic_tid});this.style.backgroundColor='pink';">
                                                点赞
                                            </button>
                                            <span id="like_num_${item.topic_tid}"
                                                  class="text-muted">${item.topic_like}</span>
                                        </div>

                                    </div>
                                </div>
                            </div>

                    </div>

                </c:forEach>

            </div>
        </div>
    </div>
</main>

<footer class="text-muted">
    <div class="container">
        <br>
        <button class="float-right backtop_button" onclick="backtop()">返回顶部</button>
    </div>
    <div class="container">
        <br>
        <a>开发团队-OYT</a>
        <br>
        <a>version 0.1.0</a>
    </div>
</footer>

<%--<script>--%>
<%--    function like() {--%>
<%--        alert("点赞成功");--%>
<%--        var topic_tid = document.getElementById("topic_tid").valueOf;--%>
<%--        $.ajax(--%>
<%--            {--%>
<%--                type: "post",--%>
<%--                url:"/topic/like",--%>
<%--                data: {topic_tid: topic_tid}--%>
<%--                async:false,--%>
<%--                success: function () {--%>

<%--                },--%>
<%--            }--%>
<%--        );--%>
<%--    }--%>
<%--</script>--%>


<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>window.jQuery || document.write('<script src="../assets/js/vendor/jquery.slim.min.js"><\/script>')</script>
<script src="http://lib.sinaapp.com/js/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
</body>
</html>

<script>
    function like(id) {
        document.getElementById("like_num_" + id).innerText++;
        $.ajax(
            {
                type: "post",
                url: "/topic/like?id=" + id,
                data: {},
                dataType: "json",
                async: false,  //使用ajax同步提交数据


            }
        );


    }

</script>

<script>
    window.onpageshow = function (event) {
        if (event.persisted) {
            window.location.reload();
        }
    };


    function backtop() {
        window.location.replace("#");
    }


    var videos = document.getElementsByTagName('video');
    for (var i = videos.length - 1; i >= 0; i--) {
        (function () {
            var p = i;
            videos[p].addEventListener('play', function () {
                pauseAll(p);
            })
        })()
    }

    function pauseAll(index) {
        for (var j = videos.length - 1; j >= 0; j--) {
            if (j != index) videos[j].pause();
        }
    }


    function claer() {
        var text = document.getElementById("sousuo")
        text.value = "";
    }
</script>

<script>
    window.onpageshow = function (event) {
        if (event.persisted) {
            window.location.reload();
        }
    };
</script>

<script>
    function rep() {
        var path = document.getElementById("")
        $.ajax({
            type: "post",
            url: "/Video/test",
            data: {
                path:,
            },
            async: false,
            success: function (response) {
            }
        });
    }
</script>

<!--<script src="https://unpkg.com/swiper@8/swiper-bundle.js"> </script>-->
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
<!--<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js.map"> </script>-->
<%--轮播--%>
<script>
    var mySwiper = new Swiper('.swiper', {
        direction: 'horizontal', // 垂直切换选项
        loop: true, // 循环模式选项

        autoplay: {
            delay: 3000,
            stopOnLastSlide: false,
            disableOnInteraction: true,
        },

        // 如果需要分页器
        // pagination: {
        //     el: '.swiper-pagination',
        // },

        // 如果需要前进后退按钮
        // navigation: {
        //     nextEl: '.swiper-button-next',
        //     prevEl: '.swiper-button-prev',
        // },

        // 如果需要滚动条
        // scrollbar: {
        //     el: '.swiper-scrollbar',
        // },
    })
</script>
